<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分类列表</title>
		<link type="text/css" rel="stylesheet" href="css/tableAndPage.css" />
	</head>
	<body>
		<h1>分类列表</h1>
		<div id="app">
			分类类型&nbsp;<select v-model="type">
				<option value="0">全部</option>
				<option value="1">一级分类</option>
				<option value="2">二级分类</option>
				<option value="3">三级分类</option>
			    <option></option>	
			 </select>
			&nbsp;&nbsp;&nbsp;
			分类名<input width="100px" v-model="name" />
			&nbsp;&nbsp;
			<button @click="chaXun()">查询</button>
			&nbsp;&nbsp;
			<button @click="add()">添加分类</button><br>
			<br />
			<table width="50%" >
			     <div v-for="item1 in typeList">
					<tr>
						<th>序号</th>
						<th>分类名</th>
						<th>分类类型</th>
						<th>所属分类</th>
						<th>操作</th>
					</tr>
					<tr v-for="(item,index) in typeList">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>
							<span v-if="item.type==1">一级分类</span>
							<span v-if="item.type==2">二级分类</span>
							<span v-if="item.type==3">三级分类</span>
						</td>
						<td v-if="item.parentId==0">该分类为一级分类</td>
						<td v-for="item1 in proType" v-if="item.parentId==item1.id">{{item1.name}}</td>
						<td><a href="javascript:void(0);" @click="xg(item.id)">修改</a>
						    <a href="javascript:void(0);" @click="del(item.id)">删除</a>
						</td>
					</tr>
			</table>
			<span>共{{pageDate.count}}条</span>
			<div class="pages">
				<a href="javascript:void(0);" class="p_pre" @click="onePage()">首页</a>
				<a href="javascript:void(0);" class="p_pre" @click="shangPage()">上一页</a>
				<a href="javascript:void(0);" class="p_pre" @click="xiaPage()">下一页</a>
				<a href="javascript:void(0);" class="p_pre" @click="showLast()">末页</a>
			</div>
		</div>
	</body>
</html>
<!-- serialNumber -->
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/md5.js"></script>

<script>
	var app = new Vue({
		el:"#app",
		data:{
			type:"",
			pageNo:1,
			name:"",
			pageDate:"",
			proType:[],
			typeList:[],
			pageCount:0,
		},
		methods:{
			md5Public:async function(objectStr){
				let randomNum = 0;
				//接口拿随机数
				await axios({
					url:"http://localhost:8080/setRedisNum",
					methods:"get"
				}).then(res => {
					// alert("随机数开始");
					console.log("随机数:"+res.data);
					randomNum = res.data;

				})
				//放到header里的参数 时间戳 随机数 加密的字符串
				//时间戳
				var dateStr = new Date();
				dateStr = Date.now();

				//把obj按照key值升序
				let sortObject = function(obj){
					let sorter = function(a,b){
						return obj[a] - obj[b];
					}
					let keys = Object.keys(obj);
					keys.sort(sorter);
					let res = {};
					keys.forEach(key => {
						res[key] = obj[key];
					});
					return res;
				}
				//升序的对象
				var sxStr = sortObject(objectStr);
				//把升序的对象转成字符串
				var jsonStr = "";
				for(let obj in objectStr){
					jsonStr += obj+"="+objectStr[obj]+"&";
				}
				//把最后一个&符号切割了
				jsonStr = jsonStr.substr(0, jsonStr.length - 1);

				//加密字符串
				var str = MD5(jsonStr+randomNum);
				console.log("jsonStr:"+jsonStr);
				console.log("randomNum:"+randomNum);
				// alert("str:"+str);
				await axios({
					url:"http://localhost:8080/returnInterfaceStr",
					methods:"POST",
					params:objectStr,
					headers:{
						"TimeStamp":dateStr,
						"randomNum":randomNum,
						"encryptionStr":str
					}
				}).then(res => {
					console.log(res);
					console.log("后端接受之:"+res.data);
					if( res.data == true ){
						return true;
					}else{
						return false;
					}
				})
				return true;
			},
			showProductTypeByPage:async function(pageNo){
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios({
						method:'post',
						url:"http://localhost:8080/showProductTypeByPage",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data: {
							type:that.type,
							pageNo:that.pageNo,
							name:that.name,
						}
					}).then(function (response) {
						that.pageDate=response.data.data;
						console.log(that.pageDate);
						that.typeList=response.data.data.list;
						console.log(that.pageDate.list);
						that.count=response.data.data.count;
						that.pageCount=response.data.data.pageCount;

					})
				}
			},
			xg:function (id) {
				window.location="typeUpdate.html?id="+id;
			},
			showProTypeId1:async function (){
				// alert(2)
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios ({
						method: 'post',
						url:"http://localhost:8080/getProductTypes",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data:{
							// typeId:1,
						}
					}).then(function (response) {
						console.log(response.data.data)
						that.proType=response.data.data;
						// console.log(that.proType1);
					})
				}
			},
			chaXun:function () {
				this.showProductTypeByPage(1);
			},
			add:function () {
				window.location.href="typeAdd.html";
			},
			onePage: function() {
				this.pageNo = 1;
				this.showProductTypeByPage(this.pageNo);
			},
			shangPage: function() {
				var pageNo1 = this.pageNo - 1
				if (pageNo1 > 0) {
					this.showProductTypeByPage(pageNo1);
					this.pageNo = pageNo1;
				} else {
					alert("当前页面为第一页")
				}
			},

			xiaPage: function() {
				var pageNo1 = this.pageNo + 1
				if (pageNo1 <= this.pageCount) {
					this.showProductTypeByPage(pageNo1);
					this.pageNo = pageNo1;
				} else {
					alert("当前页面为最后一页");
				}
			},

			showLast: function() {
				this.showProductTypeByPage(this.pageCount);
				this.pageNo = this.pageCount;
			},
			del:async function(id){
				if(confirm("是否删除？")){
					var that = this;
					let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
					if( flag == true ){
						await axios ({
							method: 'post',
							url:"http://localhost:8080/delProductType",
							headers: { 'content-type': 'application/x-www-form-urlencoded' },
							data:{
								id:id,
							}
						}).then(function (response) {
							console.log(response.data.data);
							if(response.data.data>0){
								alert("删除成功！");
								that.showProductTypeByPage(1);
							}else {
								alert("此标签下还有内容无法删除！")
							}
						})
					}
				}

			},
		},

		created(){
			this.showProductTypeByPage(1);
			this.showProTypeId1();
		}
	})


</script>
